var carousel_box = document.querySelector(".carousel_box"),
	carousel = document.querySelector("ul"),
	left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	carousel_details = document.querySelectorAll("ul li"),
	controls = document.querySelector("ol"),
	now_index = 0,
	last_index = 0,
	is_run = false,
	timer,
	new_li;

for(var i = 0;i<carousel_details.length;i++){
	var new_olLi = document.createElement("li");
	controls.appendChild(new_olLi);
}
controls.children[0].classList.add("active");

//右箭头点击事件
right_arrow.addEventListener("click", function() {
	if(!is_run) {
		is_run = true;
		if(++now_index>=carousel_details.length){
			right_run(now_index);
		}
		else{
			run(now_index);
		}
	}
})

//左箭头点击事件
left_arrow.addEventListener("click", function() {
	if(!is_run) {
		is_run = true;
		if(--now_index<0){
			left_run(now_index);
		}
		else{
			run(now_index);
		}
	}
})

//圆点控制之事件代理
//document.querySelector("ol").addEventListener("mouseover", function(e) {
//	for(var i = 0; i < controls.length; i++) {
//		e.target == controls[i] ? run(i) : "";
//	}
//})

//圆点控制之自定义属性
//for(var i = 0; i < controls.length; i++) {
//	controls[i].setAttribute("data-index", i);
//	controls[i].addEventListener("mouseover", function() {
//		run(this.getAttribute("data-index"));
//	})
//}

//圆点控制之index
//for(var i = 0; i < controls.length; i++) {
//	controls[i].index = i;
//	controls[i].addEventListener("mouseover", function() {
//		run(this.index);
//	})
//}

//圆点控制之闭包
for(var i = 0; i < controls.length; i++) {
	(function(j) {
		controls.children[j].addEventListener("mouseover", function() {
			if(last_index != j){
				now_index = j;
				run(j);
			}
		})
	})(i)
}

//自动轮播函数
function auto_play(){
	timer = setInterval(function(){
		is_run = true;
		if(++now_index>=carousel_details.length){
			right_run(now_index);
		}
		else{
			run(now_index);
		}
	},2000)	
}
auto_play();

carousel_box.addEventListener("mouseover",function(){
	clearInterval(timer);
})

carousel_box.addEventListener("mouseout",function(){
	auto_play();
})

//轮播图运行主函数
function run(target_index) {
	carousel.style.transform = "translateX(-" + target_index * 100 + "%)";
	controls.children[last_index].classList.remove("active");
	last_index = target_index;
	controls.children[target_index].classList.add("active");
	carousel.addEventListener("transitionend", function() {
		is_run = false;
	})
}

//右边边界轮播函数
function right_run(target_index){
	/*
	 * 将第一张克隆
	 * 将克隆出来的元素添加到最后
	 * 执行轮播时的动画
	 * 动画结束将视图的位置调到第一位
	 * 将克隆的元素裁剪
	 * 将原来的圆点取消类名
	 * 给第一个圆点添加类名
	 */
	new_li = carousel_details[0].cloneNode(true);
	carousel.appendChild(new_li);
	carousel.style.transform = "translateX(-" + target_index * 100 + "%)";	
	carousel.addEventListener("transitionend", right_run_end);
}

function right_run_end(){
	carousel.style.transition = "none";	
	carousel.style.transform = "translateX(0%)";
	getComputedStyle(carousel).transition;
	carousel.style.transition = "";
	new_li.remove();
	controls.children[last_index].classList.remove("active");
	last_index = 0;
	now_index = 0;
	controls.children[now_index].classList.add("active");
	carousel.removeEventListener("transitionend",right_run_end);	
}

function left_run(target_index){
	new_li = carousel_details[carousel_details.length-1].cloneNode(true);
	carousel.insertBefore(new_li,carousel_details[0]);
	carousel.style.transition = "none";
	carousel.style.transform = "translateX(-100%)";
	getComputedStyle(carousel).transition;
	carousel.style.transition = "";
	carousel.style.transform = "translateX(-0%)";
	carousel.addEventListener("transitionend",left_run_end);
	is_run = false;
}

function left_run_end(){
	carousel.style.transition = "none";	
	carousel.style.transform = "translateX(-400%)";
	getComputedStyle(carousel).transition;
	carousel.style.transition = "";
	new_li.remove();
	controls.children[last_index].classList.remove("active");
	last_index = carousel_details.length-1;
	now_index = carousel_details.length-1;
	controls.children[now_index].classList.add("active");
	carousel.removeEventListener("transitionend",left_run_end);
}
